<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" 	prefix="s"%>
<%@ include file="/jsp/common/common_head.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提纲模版&题纲的制作</title>
<%@ include file="/jsp/common/common_script.jsp"%>
<link href="css/css.css" type="text/css" rel="stylesheet" />
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/jsmind.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="brainmind/jsmind.js"></script>
<%-- <script type="text/javascript" src="brainmind/jsmind.draggable.js"></script> --%>
<script type="text/javascript" src="canvas/excanvas.js"></script>
<!-- 编辑器引用的文件 start-->
<script type="text/javascript" src="./TGTemplate/tg_core.min.js"></script>
<!-- 编辑器引用的文件 end-->
<script>
/*
 新建 题纲模版：http://120.27.142.104:1535/itbour/js/mind/index.jsp
 预览 题纲模版：http://120.27.142.104:1535/itbour/js/mind/index.jsp?id=24
 新建 题纲：http://120.27.142.104:1535/itbour/js/mind/index.jsp?mstId=24
 预览 题纲：http://120.27.142.104:1535/itbour/js/mind/index.jsp?id=54&mstId=24
		 
 在mstId存在时，表示工作在“题纲”的模式，否则表示工作在“题纲模版”的模式 
 */
	var g_id='<%=(request.getParameter("id")==null?"":request.getParameter("id"))%>';
	var g_mstId='<%=(request.getParameter("mstId")==null?"":request.getParameter("mstId"))%>';
	function getMode(){
		var mode = 1;// 提纲模版
		if(!!g_mstId) {
			mode = 2;// 提纲实例
		}
		return mode;
	}
	function getAppServer() {
		//return 'http://localhost:8080/itbour';
		return appPath;
	};
</script>
<script>
	$(document).ready(
		function() {
			// save按钮
			$(".onekeymade").hide();
			if(!g_id) {
				$(".onekeymade").show();
				if(!!g_mstId){
					$(".onekeymade").html("保存提纲实例");
				}
			}

		});
</script>
</head>
<body>
	<div class="wrapper">
		<!-- 右侧编辑区域 -->
		<div style="width:350px;height:500px;float:right;margin-top:60px;margin-right:20px;">
			<!-- 题纲编辑器－－数据版本号 -->
			<div id="version_div" style="border:solid 1px #ccc;">
				数据版本：<label id="version_p"/>
			</div>
			<!-- 题纲编辑器－－设置可选项和保留项 -->
			<div id="tg_div" style="border:solid 1px #ccc;display:none;">
				<div style="border:solid 1px #ccc;">
					节点选项：
					<input type="checkbox" id="optional" name="optional" value="optional" onchange="optionalChange(this)">可选项</input>
					<input type="checkbox" id="preserve" name="preserve" value="preserve" onchange="preserveChange(this)">保留项</input>
				</div>
				
				<br/>
				<br/>
			</div>
			
		</div>
		<div class="demo">
			<div class="cover_screen">
				<div class="progress_pic">
					<img src="images/ajax-loader.gif" />
				</div>
			</div>
			
			<div id="normalcon" class="tabcon">
				<div class="brain_title">
					<span id="message_box">选中节点后，可以添加子节点、兄弟节点、文字备注</span>
				</div>
				
				<div id="jsmind_container" style="height:450px;border:solid 1px #ccc;"></div>
				<a class="onekeymade" style="display: none;">保存提纲</a>
			</div>
			
			<div class="tanchu_black"></div>
			
			
			<!-- 编组属性弹窗 start -->
			<div class="delete_reform" id="groupWindow">
			    <a href="javascript:void(0)" class="delete_close"></a>
			    <div class="msg_con">
			        是否为编组<select class="group_child_list">
			        			<option value="0">否</option>
			        			<option value="1">是</option>
			        </select>
			        <a href="javascript:selectChildCount()" class="close_none">确定</a>
			    </div>
			</div>
			<script>
			    // 显编组属性窗口，
			    // 参数：curPage 当前页码，0表示无效，1表示首页
			    // 参数：pageCount 总页数
			    // 参数：callback 选择后的回调,页码作为参数，0表示无效，1表示首页
			    var selectGroupCallback = null;
			    function showGroupWindow(node,callback) {
			    	selectGroupCallback=callback;
			    	
			    	// (0根节点/1数组/2结构体/3叶节点)
			    	var curPage = 0;
			    	if(node.kind == 1){
			    		$(".group_child_list").val("1");
			    	}else{
			    		$(".group_child_list").val("0");
			    	}
			
			    	
			
			        $("#groupWindow,.tanchu_black").show();
			    }
			    function closeGroupWindow() {
			        $('#groupWindow,.tanchu_black').hide();
			    }
			    $(".delete_close,.close_none").click(function() {
			        $('#groupWindow,.tanchu_black').hide();
			    });
			    // 选择一个页
			    function selectChildCount(){
			        var p = $('.group_child_list').val();
			        if(selectGroupCallback){
			        	selectGroupCallback(p);
			        }
			    }
			</script>
			<!-- 编组属性弹窗 end -->
			
			<!-- 设置属性弹窗 start -->
			<div class="delete_reform" id="setAttributeWindow">
			    <a href="javascript:void(0)" class="delete_close"></a>
			    <div class="msg_con">
			        请选择节点类型：<select class="type_list"  onchange="type_list_change();"></select><br>
        			最大字数(文字时有效)<input disabled="disabled" class="text_limit" type="text" value="" style="width:50px;"/>
			        <a href="javascript:setAttributeOfNode()" class="close_none">确定</a>
			    </div>
			</div>
			
			<div class="con_tanchu" id="con_tanchu_commt">
				<a href="#" class="name_close"></a>
				<div class="user_new_name" id="user_new_name_commt">
					<p class="tanchu_title">请输入备注</p>
					<input style="display: none" class="pop_hidden_doc_id" />
					<input type="text" value="请输入文字备注" class="pop_doc_name" />
					<a onclick="js_setComment(this)" style="margin-right: 74px" class="newname_sure">完成</a>
					<a onclick="js_removeComment(this)" class="newname_sure">删除</a>
				</div>
			</div>
			
			<div class="con_tanchu" id="pop_tg_rename">
				<a href="#" class="name_close"></a>
				<div class="user_new_name" id="div_tg_rename">
					<p class="tanchu_title">请输入提纲名称</p>
					<input type="text" value="新建提纲" class="pop_doc_name" id="edit_tg_rename" />
					<a onclick="js_RenameAndSave(this)" style="margin-right: 74px" class="newname_sure">保存</a>
					<a onclick="js_cancelRename(this)" class="newname_sure">取消</a>
				</div>
			</div>
			
			<div class="delete_reform" id="pop_message">
				<a href="javascript:void(0)" class="delete_close"></a>
				<div class="msg_con">
					<p class="msg_title">消息？</p>
					<a href="javascript:void(0)" class="close_none">关闭</a>
				</div>
			</div>
			
			<script>
				function showMsg(msg) {
					$('.msg_title').html(msg);
					$("#pop_message,.tanchu_black").show();
				}
				function closeMsg() {
					$('#pop_message,.tanchu_black').hide();
				}
				$(".delete_close,.close_none").click(function() {
					$('.delete_reform,.tanchu_black').hide();
				});
			</script>
			
			<script>
			    // 显示属性窗口，
			    // 参数：node 节点
			    // 参数：callback 选择后的回调,
			    var setAttributeCallback = null;
			    function showSetAttributeWindow(node,callback) {
			    	setAttributeCallback=callback;
					// 自身（不包含子）的表现形式1(0无/1文字/2图片/3图表/4表格)
					var t_list = ['0.无','1.文字','2.图片','3.图表(暂不支持)','4.表格','5.图形'];
			        $('.type_list').html('');
			        for(var i=0;i<t_list.length;i++){
			            var p = t_list[i];
			            var s = i==node.type?' selected="selected" ':'';
			            var str = '<option value ="'+i+'" '+s+'>'+p+'</option>';
			            $('.type_list').append(str);
			        }
			        
			     	// 显示文字最大字数
			        showTextLimit(node.type, node.value.max);
			
			        $("#setAttributeWindow,.tanchu_black").show();
			    }
			 	// 类型变化函数
			    function type_list_change(){
			    	var type = $('.type_list').val();
			    	showTextLimit(type);
			    }
			 	// 显示文字最大字数
			    function showTextLimit(type,value){
			    	if(type==1){
			        	$(".text_limit").removeAttr("disabled");// enable 
			        	if(value){
			        		$(".text_limit").val(value);	
			        	}        	
			        }else{
			        	$(".text_limit").attr("disabled","disabled");// disabled
			        }
			    }
			    function closeSetAttributeWindoww() {
			        $('#setAttributeWindow,.tanchu_black').hide();
			    }
			    // 设置类型
			    function setAttributeOfNode(){
			    	var type = $('.type_list').val();
			        var text_limit = parseInt($(".text_limit").val());
			        if(setAttributeCallback){
			        	setAttributeCallback(type,text_limit);
			        }
			    }
			</script>
			<script>
			//题纲编辑器－－设置可选项和保留项 -----------------------------------start
			// 选中节点时的回调
			function setSelectNodeOptAndPreToUI(node){
				console.log("fffffffffffffff");
				if(node){
					if(node.o){
						$('#optional').attr("checked", "checked");	
					}else{
						$('#optional').removeAttr("checked");	
					}
								
					if(node.p){
						$('#preserve').attr("checked", "checked");	
					}else{
						$('#preserve').removeAttr("checked");	
					}
				}
			}
			
			// optional的checkbox变化后更新节点信息
			function optionalChange(THIS){
				var t = $(THIS);
				var c = 0;
				if(t.is(':checked')){
					c = 1;	
				}
				jm.setSelectNodeOptional(c);
			}
			// preserve的checkbox变化后更新节点信息
			function preserveChange(THIS){
				var t = $(THIS);
				var c = 0;
				if(t.is(':checked')){
					c = 1;	
				}
				jm.setSelectNodePreserve(c);
			}
			// 题纲编辑器－－设置可选项和保留项 -----------------------------------end
			</script>
			<script>
				// 获取默认提纲数据
				function getDefaultBrainMind() {
					//var defData = '{"version":"1","name":"提纲脑图","root":{"id":"1","topic":"会议邀请函","type":1,"kind":0,"page_index":null,"value":{"ct":808,"type":20,"id":0,"value":"邀请函","min":0,"max":10},"obj_id":null,"children":[{"id":"11","topic":"会议名称","type":"1","kind":3,"page_index":null,"value":{"ct":808,"type":20,"id":0,"value":"默认的文字内容","min":1,"max":7,"originContour":null},"obj_id":null,"children":[]},{"id":"12","topic":"会议图片","type":"2","kind":3,"page_index":null,"value":{"ct":805,"type":30,"id":0,"value":"http://127.0.0.1:3001/1.jpg","pos":{"ct":2,"x":0,"y":0,"w":100,"h":100,"an":0},"mask":null},"obj_id":null,"children":[]},{"id":"13","topic":"邀请嘉宾","type":"1","kind":1,"page_index":null,"value":{"ct":808,"type":20,"id":0,"value":"默认的文字内容","min":1,"max":7,"originContour":null},"obj_id":null,"children":[{"id":"131","topic":"嘉宾1","type":"1","kind":2,"page_index":null,"value":{"ct":808,"type":20,"id":0,"value":"默认的文字内容","min":1,"max":7,"originContour":null},"obj_id":null,"children":[{"id":"1311","topic":"名称1","type":"1","kind":3,"page_index":null,"value":{"ct":808,"type":20,"id":0,"value":"默认的文字内容","min":1,"max":7,"originContour":null},"obj_id":null,"children":[]},{"id":"1312","topic":"头像1","type":"2","kind":3,"page_index":null,"value":{"ct":805,"type":30,"id":0,"value":"http://127.0.0.1:3001/1.jpg","pos":{"ct":2,"x":0,"y":0,"w":100,"h":100,"an":0},"mask":null},"obj_id":null,"children":[]}]},{"id":"132","topic":"嘉宾2","type":1,"kind":2,"page_index":null,"value":{"ct":808,"type":20,"id":0,"value":"默认的文字内容","min":1,"max":7,"originContour":null},"obj_id":null,"children":[{"id":"1321","topic":"名称2","type":"1","kind":3,"page_index":null,"value":{"ct":808,"type":20,"id":0,"value":"默认的文字内容","min":1,"max":7,"originContour":null},"obj_id":null,"children":[]},{"id":"1322","topic":"头像2","type":"2","kind":3,"page_index":null,"value":{"ct":805,"type":30,"id":0,"value":"http://127.0.0.1:3001/1.jpg","pos":{"ct":2,"x":0,"y":0,"w":100,"h":100,"an":0},"mask":null},"obj_id":null,"children":[]}]}]}]}}';
					// 开始使用版本号为3的数据
					var defData = '{"version":"3","root":{"kind":0,"obj_id":null,"value":null,"children":[{"kind":3,"obj_id":null,"value":null,"children":[],"topic":"会议名称","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"11"},{"kind":3,"relations":[],"h":0,"o":0,"p":0,"obj_id":null,"value":null,"children":[],"topic":"会议图片","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"12"},{"kind":1,"obj_id":null,"value":null,"children":[{"kind":2,"obj_id":null,"value":null,"children":[{"kind":3,"obj_id":null,"value":null,"children":[],"topic":"名称1","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"1311"},{"kind":3,"obj_id":null,"value":null,"children":[],"topic":"头像1","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"1312"}],"topic":"嘉宾1","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"131"},{"kind":2,"obj_id":null,"value":null,"children":[{"kind":3,"obj_id":null,"value":null,"children":[],"topic":"名称2","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"1321"},{"kind":3,"obj_id":null,"value":null,"children":[],"topic":"头像2","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"1322"}],"topic":"嘉宾2","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"132"}],"topic":"邀请嘉宾","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"13"}],"topic":"会议邀请函","page_index":null,"relations":[],"h":0,"o":0,"p":0,"type":0,"id":"1"},"name":"会议邀请函"}';
					var tree = JSON.parse(defData);
					return tree;
				}
				var jm = null; // 脑图
				$(function() {
					function load_jsmind() {
						//
						$.post(
							getAppServer() + "/itbTg/getOutlineTmpl.action",
							{
								tgId : g_id || g_mstId || -1,
							},
							function(ret) {
								var tree = '{}';
								if (ret && ret.length>0) {
									tree = JSON.parse(ret[0].data);
								}else{
									tree = getDefaultBrainMind();
								}
								
								// 模式
								var mode = getMode();
								
								// 刷新界面显示－－－版本号显示
								$('#version_p').html(tree.version);
								// 刷新界面显示－－－根据模式显示右侧编辑区域内容
						        (function show_mode_div(mode){
						        	if(mode==2){
						        		if(tree.version>=3){
						        			$('#tg_div').show();	
						        		}
						        	}
						        })(mode);
								
								
								
								var options = {
									container : 'jsmind_container',
									editable : true,
									theme : 'greensea',
									edit_mode: mode,
									callbacks : {
										message : function(_msg, _alert) {
											$('#message_box').html(_msg);
											if (_alert) {
												showMsg(_msg);
											}

											//console.log(_msg);
										},
										select:function(node){
						                	setSelectNodeOptAndPreToUI(node);
						                },
										add_image : function(image, _callback) {
											//console.log(image);
											_callback(image.value, image.pos);
										},
										add_comment : function(comment, _callback) {
											js_popSetComment(comment, function(
													newComment) {
												//console.log(newComment);
												_callback(newComment);
											});
										},
										add_group:function(node, _callback){
						                	showGroupWindow(node,function(p){
						                		
						                    	_callback(node, p);                		
						                	});
						                },
										/* add_page :function(node, cp, _callback){
						                    showPageWindow(cp,5,function(p){
						                        _callback(node,p)
						                    });

						                }, */
						                add_attribute :function(node, _callback){
						                	showSetAttributeWindow(node, function(type,text_limit){
						                		// 修改node
						                		//todo：需要细化，这里暂时使用默认值
						                		
						                		node.type = type;
						                		// value置空以便重新赋值
						                		node.value = null;
						 						     
						                		_callback(node,text_limit);
						                	});
						                },
									}
								};
								jm = jsMind.show_tree(options, tree);
								if (true) {
									jm.view.relayout();
								}
							}
						);
					}

					load_jsmind();
				});
			</script>
			<script>
				//测算弹出窗口的居中位置；
				var Owidth = 850;
				var Oheight = 578;
				var shijiW = (Owidth - 362) / 2;
				var shijiH = (Oheight - 214) / 2;
				$('.con_tanchu').css({
					top : shijiH,
					left : shijiW
				});

				$('.name_close,.newname_cancle,.newname_sure').click(
					function() {
						$('.user_new_name,.con_tanchu,.tanchu_black').hide();
						$('.tsq a').css('background', 'none').css('color','#049DD5');
					});

				var js_pop_callback = null;
				function js_popSetComment(comment, callback) {
					js_pop_callback = callback;

					var pop = $('#user_new_name_commt');
					var contanchu = $('#con_tanchu_commt');
					var tanchublack = $('.tanchu_black');
					//pop.find('.pop_hidden_doc_id').val(nodeid);
					pop.find('.pop_doc_name').val(comment);

					pop.show();
					contanchu.show();
					tanchublack.show();
				};
				function js_setComment(THIS) {
					var cur = $(THIS);
					var doc_name = cur.prev().val();
					var doc_id = cur.prev().prev().val();
					js_pop_callback(doc_name);
				}
				function js_removeComment(THIS) {
					js_pop_callback(null);
				}
				
				// 提纲命名
				function js_RenameAndSave(THIS) {
					var tgName = $('#edit_tg_rename').val() || jm.mind.name;
					
					
					// 检测节点属性
					if(!jm.check()){
						showMsg("节点输定错误！例如：含有孙子的节点未设置为编组");
			        	return;
					}
					
					//if(tgName && tgName.length>0){
						jm.mind.name = tgName;// Rename
						
						if(jm.hasTableNode()) {
							jm.mind.version=4;// 含有表格节点时，版本号改为4
						}
						
						var ver = jm.mind_data_version();
						var _tree = jm.mind_2_tree();
						if(getMode()==2){
							if(ver>=3){
								var sjgTg =new SJGTGV3();
								sjgTg.fromJson(_tree,ver);
								if(!sjgTg.checkType()){
									alert('有节点未设置类型！');
									return ;
								}
							}else{
								var sjgTg =new SJGTG();
								sjgTg.fromJson(_tree,0);
								if(!sjgTg.checkType()){
									alert('有节点未设置类型！');
									return ;
								}	
							}
						}
						
						
						$('.cover_screen').show();
						$.post(
							getAppServer() + "/itbTgWeb/updOutline.action",
							{
								id : g_id,
								mstId : g_mstId,
								name: tgName,
								ver: ver,// 版本号
								data : JSON.stringify(_tree)
							},
							function(ret) {
								if (ret && ret.status=="ok") {
									showMsg("保存成功！");
									g_id=ret.tgId;
								}else{
									showMsg("保存失败！");
								}
								
								$('.cover_screen').hide();
							}
						);
					//}
				}
				function js_cancelRename(THIS){
					//
				}
			</script>
			<script>
				// 绑定[保存]点击事件
				$(function() {
					$('.onekeymade').click(
						function() {
							// 显示重命名界面
							var pop = $('#pop_tg_rename');
							var contanchu = $('#div_tg_rename');
							var tanchublack = $('.tanchu_black');
							$('#edit_tg_rename').val(jm.mind.name);

							pop.show();
							contanchu.show();
							tanchublack.show();
						}
					);
				});
			</script>
			<script>
				$(function() {
					//
					// TODO
				});
			</script>
			<!-- 统计-->
			<script>
/* 				var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
				document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259949482'%3E%3C/span%3E%3Cscript src='"
						+ cnzz_protocol
						+ "s4.cnzz.com/z_stat.php%3Fid%3D1259949482' type='text/javascript'%3E%3C/script%3E")); */
			</script>
		</div>
	</div>
</body>
</html>
